<!DOCTYPE html>

<html lang="en-us"><head>
  <meta charset="utf-8">
  <title>书法的气韵生动</title>
  <script src="js/vue.js"></script>
  <script src="./js/axios.js"></script>

  <!-- mobile responsive meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="This is meta description">
  <meta name="generator" content="Hugo 0.74.3" />

  <!-- plugins -->
  
  <link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="plugins/themify-icons/themify-icons.css">
  <link rel="stylesheet" href="plugins/slick/slick.css">

  <!-- Main Stylesheet -->
  <link rel="stylesheet" href="css/style.css" media="screen">

  <!--Favicon-->
  <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
  <link rel="icon" href="images/favicon.png" type="image/x-icon">

  <meta property="og:title" content="Reader | Hugo Personal Blog Template" />
  <meta property="og:description" content="This is meta description" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="" />
  <meta property="og:updated_time" content="2020-03-15T15:40:24+06:00" />
</head>
<body>
 <!-- navigation -->
<!-- navigation -->
<header class="navigation ">
  <div class="container" id="index">
    <nav class="navbar navbar-expand-lg navbar-white">
      <a class="navbar-brand order-1" href="admin.html">
        <img class="img-fluid" width="50px" src="images/图标.png" alt="管理后台">
      </a>
      <div class="collapse navbar-collapse text-center order-lg-2 order-3" id="navigation">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item">
            <a class="nav-link" href="admin.html">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="admin-check.html">审核文章</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="forbid.html">禁言用户</a>
          </li>
        </ul>
      </div>
      <div class="order-2 order-lg-3 d-flex align-items-center">
      <ul class="navbar-nav ml-auto 1ogined"  v-if="userid!=null">
        <li class="nav-item @@login__active">
          <span><a class="nav-link">{{userid}}</a></span>
        </li>
          <li class="nav-item @@register__active">
              <span v-on:click.prevent="logout"><a class="nav-link" href="Login.html">注销</a></span>
          </li>
      </ul>
      </div>
    </nav>
  </div>
</header>
<script>
  new Vue({
    el: "#index",
    data: {
      userid: localStorage["userid"],
      searchId: '' // 用于存储搜索的ID
    },
    methods: {
      logout: function() {
        localStorage.clear();
        this.userid = null;
        location.href = "Login.html";
      },
    }
  })
</script>
<section class="section-sm">
  <div class="container"id="newpost" >
    <div class="row justify-content-center">
      <div class=" col-lg-9   mb-5 mb-lg-0">
        <article>
          <h1 class="h2">{{post.title}}</h1>
          <ul class="card-meta my-3 list-inline">
            <li class="list-inline-item">
              <a class="card-meta-author">
                <span>{{post.userId}}</span>
              </a>
            </li>
            <li class="list-inline-item">
              <i class="ti-calendar"></i>{{ post.time.replace('T', ' ') }}
            </li>
            <li class="list-inline-item">
              <ul class="card-meta-tag list-inline">
                <li class="list-inline-item"><a >{{post.topicType}}</a></li>
              </ul>
            </li>
          </ul>
          <div class="content" v-html="formattedText">
            {{post.text}}
          </div>
        </article>
        <a href="admin.html"><button class="btn btn-danger delete-btn">返回</button></a>
        <button class="btn btn-danger delete-btn" v-on:click.prevent="deletePost(post.id)">删除</button>
      </div>
    </div>
  </div>
</section>
<script>
  var vm = new Vue({
    el: "#newpost",
    data: {
      userid: localStorage["userid"],
      post: JSON.parse(window.localStorage.getItem("postInfo" + localStorage["num"])),
    },
    computed: {
        formattedText() {
          // 将换行符转换为<p>标签，并且每个段落都缩进
          return this.post.text
            .split('\n')   // 根据换行符分割文本
            .map(paragraph => `<p class="artic">${paragraph}</p>`)  // 每一段包装为<p>标签
            .join('');     // 合并所有段落
        }
      },
    methods: {
      logout: function() {
        localStorage.clear();
        this.userid = null;
      },
      deletePost:function(postId) {
        axios.delete('https://localhost:7071/api/Post?pid=' + postId)
              .then((res) =>
                    {
                        alert("已删除成功");
                        location.href = "admin.html";
                    })
      }
    }
  });
</script>
<footer class="footer">
  <svg class="footer-border" height="214" viewBox="0 0 2204 214" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2203 213C2136.58 157.994 1942.77 -33.1996 1633.1 53.0486C1414.13 114.038 1200.92 188.208 967.765 118.127C820.12 73.7483 263.977 -143.754 0.999958 158.899"
      stroke-width="2" />
  </svg>
  <div class="container">
      <div class="row align-items-center">
      <div class="col-md-5 text-center text-md-left mb-4">
          <ul class="list-inline footer-list mb-0">
            <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
            <!-- <li class="list-inline-item"><a href="terms-conditions.html">Terms Conditions</a></li> -->
          </ul>
      </div>
      <div class="col-md-2 text-center mb-4">
          <a href="index.html"><img class="img-fluid" width="100px" src="images/图标.png" alt="Reader | Hugo Personal Blog Template"></a>
      </div>
      <div class="col-12">
          <div class="border-bottom border-default"></div>
      </div>
      </div>
  </div>
  </footer>


  <!-- JS Plugins -->
  <script src="plugins/jQuery/jquery.min.js"></script>

  <script src="plugins/bootstrap/bootstrap.js"></script>

  <script src="plugins/slick/slick.min.js"></script>

  <script src="plugins/instafeed/instafeed.min.js"></script>


  <!-- Main Script -->
  <script src="js/script.js"></script></body>
</html>